<template>
	<view class="container">
		<!-- 性别 -->
		<view style="width: 100%;height: 12vh;text-align: center;">
			<span style="font-size: 36px;font-weight: 400;">性别</span>
		</view>
		<!-- 文本 -->
		<view style="width: 90%;height: 10vh;text-align: center;margin: 0 auto;">
			<span style="font-size: 18px;font-weight: 400;color: rgba(150, 150, 150, 1);">针对男/女及不同年龄段的训练方法有所差异，完善个人信息，更科学的获取运动指导</span>
		</view>
		<view style="width: 100%;height: 1vh;"></view>
		<view class="boy" @click="changeBoyImage">
			<image :src="boyImage" mode="" class="img1"></image>
		</view>
		<view style="width: 100%;height: 3vh;"></view>
		<view class="girl" @click="changeImage">
			<image :src="imageUrl" mode="" class="img1"></image>
		</view>
		<view style="width: 100%;height: 3vh;"></view>
		<!-- 暂时不绑定 -->
		<view style="width: 80%;height: 9vh;margin: 0 auto;text-align: center;">
			<span style="font-size: 18px;color: rgba(179, 179, 179, 1);font-weight: 400;">暂时先不绑定信息，稍后在我的自行完成</span>
		</view>
		<view style="width: 70%;height: 6vh;margin: 0 auto;">
			<view style="width: 40%;height: 100%;float: left;border: 2px solid rgba(227, 227, 227, 1);border-radius: 48px;text-align: center;">
				<span style="font-size: 20px;color: rgba(133, 133, 133, 1);font-weight: 400;line-height: 6vh;">保密</span>
			</view>
			<view @click="goAge()" style="width: 40%;height: 100%;float: right;background: linear-gradient(90deg, rgba(146, 163, 253, 1) 0%, rgba(157, 206, 255, 1) 100%);border-radius: 48px;text-align: center;">
				<span style="font-size: 20px;color: rgba(255, 255, 255, 1);font-weight: 400;line-height: 6vh;">确定</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
			userInfo:{},
			imageUrl: "../../static/Gender.png",
			boyImage: "../../static/boy.png"
	    };
	  },
	  created() {
	  	this.userInfo=uni.getStorageSync('userInfo')
	  },
	  methods: {
		  // 性别女点击事件
	    changeImage() {
			this.userInfo.memberUserSex=1
	      this.imageUrl = "../../static/girl.png"; // 更改为您想要更换的图像路径
		  this.boyImage = "../../static/boy.png"; // 更改为您想要更换的图像路径
	    },
		 // 性别男点击事件
		changeBoyImage () {
			this.userInfo.memberUserSex=0
			this.imageUrl = "../../static/Gender.png"; // 更改为您想要更换的图像路径
			this.boyImage = "../../static/Gender 2.png"; // 更改为您想要更换的图像路径
		},
		goAge () {
			uni.setStorageSync('userInfo',this.userInfo)
			uni.navigateTo({
				url: '/pages/chooseLabel/age',
				animationType: 'slide-out-top',
				animationDuration: 200
			})
		},
	  }
	};
</script>

<style>
	/* 设置背景图片 */
	.container {
	  /* display: flex; */
	  justify-content: center;
	  align-items: center;
	  height: 100vh;
	  /* background: blue; */
	  /* background-image: url("https://img.js.design/assets/img/625aea28bd06c1a5e27ed094.png"); */
	  /* background-size: cover; */
	}
	.girl{
		width: 22vh;
		height: 22vh;
		/* background-color: red; */
		margin: 0 auto;
	}
	.boy{
		width: 22vh;
		height: 22vh;
		/* background-color: red; */
		margin: 0 auto;
	}
	.img1{
		width: 100%;
		height: 100%;
	}
</style>